<template>
	<scroll-view scroll-y="true">
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :style="{'width':column==2?'48%':'98% !important','margin-left':column==2?'1%':''}"
			 :key="index" :class="['goods-item',column==1?'listItem':'']" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<view class="storeType" v-show="item.attrType == 'goods'">自营</view>
					<view class="storeType" v-show="item.attrType == 'giftBag'">礼包</view>
					<view class="storeType" v-show="item.attrType == 'pintuan'">拼团</view>
					<image lazy-load :src="item.goodsImg" :lazy-load="true" class="goodsPic" mode="aspectFit"></image>
				</view>
				<view v-if="item.isAvoid" :class="[column==1?'goodContext':'']">
					<view class="title ">{{item.goodsName}}</view>
					<view class="price-box">
						<text class="price" style="text-decoration: line-through;">{{item.shopPrice}}</text>
						<text class='costScore'>{{item.startUs?'可兑换':'无积分兑换'}}</text>
					</view>
					<view class="saleLess">
						<view class="vipBox">
							会员价<text class="vprice">{{item.shopVipPrice}}</text>
						</view>
						<view class="rang">
							运费：{{item.goodsFreight}}
						</view>
					</view>
				</view>
				<view v-else :class="[column==1?'goodContext':'']">
					<view class="title ">{{item.goodsName}}</view>
					<view class="price-box" style="justify-content:space-between;">
						<view>
							<text class="price">{{item.shopPrice}}</text>
							<text class="price" style="text-decoration: line-through;color: #999;font-size: 12px;margin-left: 10px;">{{item.marketPrice}}</text>
						</view>
						<image class="bgimage" mode="aspectFit" v-if="item.startUs" style="width: 15px;height: 15px;text-align: right;" src="../../district/static/dh.png"></image>
					</view>
					<!-- 	<view class="price-box">
						<text class='costScore'>{{item.startUs?'可兑换':'无积分兑换'}}</text>
					</view> -->
					<view class="saleLess">
						<view class="vipBox" v-show="item.shopVipPrice > 0">
							会员价<text class="vprice">{{item.shopVipPrice}}</text>
						</view>
					</view>
					<view class="rang">
						<view>让&nbsp利&nbsp值&nbsp：</view>
						<view class='commright'></view>{{item.rebatePv | parseIntFilter}}
					</view>
					<view class="expreTitle">
						<view>消费奖励：</view>
						<view class='commright'></view>{{item.rebate_gg_credit | parseIntFilter}}
					</view>
				</view>

				<!-- <view class="score" v-if="item.startUs==1 && column==2">
					<view v-if="item.startUs">
		
						<text class='costScore'>{{item.integral}}</text>积分可兑换<text class="recharge">{{item.cash}}</text>
					</view>
					<view v-if="column==2 && item.startUs==0">
						商品无积分兑换
					</view>
				</view> -->
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			goodsList: Array,
			column: {
				type: Number,
				default: 2
			}
		},
		data() {
			return {
				is_sq: 0,
				isgift:0,
			};
		},
		methods: {
			//详情
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				console.log(item)
				let id = item.goodsId;
				if (item.isAppointment == 1 || item.isFreeAppointment == 1) {
					this.is_sq = 1;
				}else{
					this.is_sq = 0;
				}
				if(item.isGiftBag == 1){
					this.isgift = 1;
				}else{
					this.isgift = 0;
				}
				uni.navigateTo({
					url: '/pages/product/product?id='+ id + '&is_sq=' + this.is_sq  + '&isgift='+this.isgift
				})
			},
		}
	}
</script>

<style lang="scss">
	.goods-list {
		display: flex;
		flex-wrap: wrap;
	}

	.storeType {
		background-color: #e12038;
		color: #fff;
		font-size: 20rpx;
		position: absolute;
		@include textVCenter(40rpx);
		transform: rotate(-45deg);
		left: -30rpx;
		z-index: 19;
		width: 100rpx;
		text-align: center;
	}

	.listItem {
		flex-direction: row !important;
		width: 98% !important;

		.image-wrapper {
			width: 35% !important;
			height: 230rpx !important;

		}

		.goodContext {
			width: 65% !important;
			padding-left: 20rpx;
		}
	}

	.goodContext {
		@extend %flexVerBetw;
		min-height: 230rpx;
	}

	.costScore {
		color: $themColor;
	}

	.goods-item {
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
		padding: 30upx 0upx 30upx 10upx;
		border-radius: 10rpx;
		background-color: #fff;

	}

	.image-wrapper {
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		position: relative;

		.goodsPic {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}

	.title {
		font-size: $uni-font-size-sm;
		color: $font-color-dark;
		line-height: 40upx;
		@include moreLine(2);
	}

	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10upx;
		padding-top: 18rpx;
		font-size: 24upx;
		color: $font-color-light;
	}

	.vipBox {
		background-color: $themLight;
		color: #fff;
		font-size: 20rpx;
		@include textCenter(40rpx);
		padding: 0 10rpx;
		border-radius: 20rpx;
		display: flex;

		.vprice {
			color: #fff;

			&:before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}


	// @extend %flexBetw;
	.vipBox {
		width: 240upx;
	}

	.expreTitle {
		color: #fa436a;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		padding-right: 10px;
	}

	.rang {
		font-size: 28rpx;
		color: $uni-color-primary;
		padding: 3px 0px;
		display: flex;
		justify-content: space-between;
		padding-right: 10px;
	}

	.commright {
		text-align: right;
		display: inline-block;

	}

	.score {
		height: 50rpx;
		line-height: 50rpx;
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;



		.recharge {
			color: $uni-color-primary;

			&::before {
				content: '￥';
			}
		}
	}

	.price {
		font-size: $font-lg;
		color: $uni-color-primary;
		line-height: 1;

		&:before {
			content: '￥';
			font-size: 26upx;
		}
	}
</style>
